<template>
  <div>
    <FieldValidatorItem v-if="!isRulesEmpty" ref="itemValidate" v-model="value" :tag="tag" :rules="rules">
      <slot />
    </FieldValidatorItem>
    <template v-else>
      <slot />
    </template>
  </div>
</template>

<script lang="ts" setup>
import _ from 'lodash'
import FieldValidatorItem from '@/components/FieldValidator/item.vue'

var props = defineProps({
  value: {
    type: [Array, Object, String, Number, Boolean, Date],
    default: null
  },
  tag: {
    type: [String, Number],
    default: ''
  },
  rules: {
    type: [Object, Array],
    default() {
      return []
    }
  }
})
const value=ref(props.value)
var isRulesEmpty = computed(() => {
  return _.isEmpty(props.rules)
})
const itemValidate = ref()
const validate = () => {
  let validator = null
  if (isRulesEmpty) {
    validator = Promise.resolve()
  } else {
    validator = itemValidate.value.validate()
  }
  return validator
}
defineExpose({validate})

</script>
